<script>
/*
 * @Author: wzh 
 * @Date: 2020-11-20 13:19:12 
 * @Last Modified by:   1521620993@qq.com 
 * @Last Modified time: 2020-11-20 13:19:12 
 */
</script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-优先级</title>
</head>
<body>
  <style>
    /* 
      | 选择器                     | 每一个的权重 |
      | 元素选择器/伪元素选择器       | 1          |
      | 类选择器/伪类选择器/属性选择器 | 10         |
      | ID选择器                   | 100        |
     */
    
    #content span:hover{
      /* 111 */
      font-size: 29px;
    }
    #content span{
      /* 101 */
      font-size: 26px;
    }
    div p span:hover{
      /* 13 */
      font-size: 23px;
    }
    p[class=p1] span{
      /* 12 */
      font-size: 21px;
    }
    span.sp1{
      /* 11 */
      font-size: 19px;
    }
    .sp1{
      /* 10 */
      font-size: 16px;
    }
    span{
      /* 1 */
      font-size: 13px;
    }
    p span::before{
      /* 3 */
      content: '》'
    }
    span::before{
      /* 2 */
      content: '>'
    } 
  </style>
  <div id="content">
    <p class="p1">
      <span class="sp1">CSS</span>
    </p>
  </div>

</body>
</html>